<!DOCTYPE html>
<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title></title>
    <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=7pCcgGGTzGkR4mOzxay5Wt8C&v=1.0"></script>
    <style type="text/css">
        body{
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.4;
            color: #333333;
            background: #EEEEEE;
        }
        body, html {width: 100%;height: 100%;overflow: hidden;margin:0;}

        #l-map {width: 100%;height: 45%;overflow: hidden;margin:0;}

        .cooperation {
            height: 55%
        }

        .cooperation .content {
            padding: 1% 5% 3% 5%;
        }
        .cooperation .cooper-info {
            border: 1px dotted #999;
            padding: 2% 4%;
            border-radius: 5px;
            background: #fff;
        }

        .desc {
            line-height: 1.8;
        }
    </style>
</head>
<body>

<div class="cooperation">
    <div class="content">
        <p class="desc" id="_desc"></p>

        <div class="cooper-info">
            <h4 id="_title"></h4>
            <p id="_contact">联系人：</p>
            <p id="_tel">联系电话：</p>
            <p id="_mailbox">邮箱：</p>
            <p id="_location">地址：</p>
        </div>
    </div>
</div>
<div id="l-map">
</div>
<script type="text/javascript">
    new QWebChannel(navigator.qtWebChannelTransport, function(channel) {
        var lib = channel.objects.lib;

        var map = new BMap.Map("l-map");
            var point = new BMap.Point(lib.x, lib.y);
            map.centerAndZoom(point, 14);

            function addMarker(point, index) { // 创建图标对象
                var myIcon = new BMap.Icon("qrc:///image/location.gif",
                    new BMap.Size(14, 23), {
                        // 指定定位位置。
                        // 当标注显示在地图上时，其所指向的地理位置距离图标左上
                        // 角各偏移7像素和25像素。您可以看到在本例中该位置即是
                        // 图标中央下端的尖角位置。
                        anchor: new BMap.Size(7, 25),
                    });
                // 创建标注对象并添加到地图
                var marker = new BMap.Marker(point, {
                    icon: myIcon
                });
                map.addOverlay(marker);
            }

        addMarker(point, 0);

        var item = document.getElementById("_desc");
        item.innerHTML = item.innerText + lib.description;

        item = document.getElementById("_title");
        item.innerHTML = item.innerText + lib.title;

        item = document.getElementById("_contact");
        item.innerHTML =  item.innerText + lib.contact;

        item = document.getElementById("_tel");
        item.innerHTML =  item.innerText + lib.tel;

        item = document.getElementById("_mailbox");
        item.innerHTML =  item.innerText + lib.mailbox;

        item = document.getElementById("_location");
        item.innerHTML =  item.innerText + lib.address;
    });
</script>

</body>
</html>
